<div ngbDropdown #dropdwn="ngbDropdown" class="search-box">
  <button hidden ngbDropdownAnchor id="addQueryParamDropdown"></button>
  <div ngbDropdownMenu aria-labelledby="addQueryParamDropdown">
    <a class="dropdown-item" [hidden]="show.sort"  (click)="toggle(true, 'sort')" >Sort</a>
    <a class="dropdown-item" [hidden]="show.skip"  (click)="toggle(true, 'skip')" >Skip</a>
    <a class="dropdown-item" [hidden]="show.limit" (click)="toggle(true, 'limit')">Limit</a>
    <a class="dropdown-item" [hidden]="show.project" (click)="toggle(true, 'project')">Project</a>
  </div>
</div>
<div class="search-box">
  <div class="params-group">
    <div class="input-group">
      <div class="label">Query:</div>
      <input type="text" [(ngModel)]="params.query" (keypress)="keyPress($event)"/>
    </div>
    <div class="input-group" *ngIf="show.sort">
      <div class="label">Sort:</div>
      <input type="text" [(ngModel)]="params.sort" (keypress)="keyPress($event)"/>
      <div class="close" (click)="toggle(false, 'sort')">&times;</div>
    </div>
    <div class="input-group" *ngIf="show.skip">
      <div class="label">Skip:</div>
      <input type="number" [(ngModel)]="params.skip" (keypress)="keyPress($event)"/>
      <div class="close" (click)="toggle(false, 'skip')">&times;</div>
    </div>
    <div class="input-group" *ngIf="show.limit">
      <div class="label">Limit:</div>
      <input type="number" [(ngModel)]="params.limit" (keypress)="keyPress($event)"/>
      <div class="close" (click)="toggle(false, 'limit')">&times;</div>
    </div>
    <div class="input-group" *ngIf="show.project">
      <div class="label">Project:</div>
      <input type="text" [(ngModel)]="params.project" (keypress)="keyPress($event)"/>
      <div class="close" (click)="toggle(false, 'project')">&times;</div>
    </div>
  </div>
  <div class="add-param btn" (click)="$event.stopPropagation(); dropdwn.open();" [hidden]="!canAddParams()">
    +
  </div>
  <div class="confirm-search btn" (click)="go()">
    GO!
  </div>
</div>
